<template>
  <section class="my-orderdetail">
    <div class="address flex flex-middle">
      <img class="icon" src="/static/images/errand/icon2.png" alt />
      <div>
        <div>
          <span class="name">{{info.receiveName}}</span>
          <span class="phone">{{info.receiveTel}}</span>
        </div>
        <div class="add mt15">{{info.dtlAddr}}</div>
      </div>
    </div>
    <div class="commodity" v-for="item in info.productList" :key="item">
      <div class="content">
        <van-row>
          <van-col span="9">
            <img :src="item.frontPicUrl" alt />
          </van-col>
          <van-col span="15" class="left">
            <div class="title van-multi-ellipsis--l2">{{item.productName}}</div>
            <div class="mt15 desc">{{item.colorName}} {{item.specsName}}</div>
            <div class="flex mt10 flex-between">
              <div class="price">￥{{item.price}}</div>
              <div class="num">X{{item.buyNums}}</div>
            </div>
          </van-col>
        </van-row>
      </div>
    </div>
    <div class="info">
      <div class="item flex flex-between">
        <span class="left">付款方式</span>
        <span class="right">{{info.payMode==1?'微信支付':'支付宝付款'}}</span>
      </div>
      <!-- <div class="item flex flex-between">
        <span class="left">售后服务</span><span class="right">{{item.buyNums}}七天包换</span>
      </div>-->
      <div class="item flex flex-between">
        <span class="left">备注</span>
        <span class="right">{{info.remark?info.remark:'无'}}</span>
      </div>
      <div class="item flex flex-between">
        <span class="left">下单时间</span>
        <span class="right">{{info.createTime}}</span>
      </div>
      <div class="item flex flex-between">
        <span class="left">订单编号</span>
        <span class="right">{{info.orderId}}</span>
      </div>
      <div class="item flex flex-between">
        <span class="left">订单金额</span>
        <span class="price">￥{{info.totalAmt}}</span>
      </div>
    </div>
    <div class="bottom flex flex-between">
      <!-- <button
        open-type="contact"
        session-from="weapp"
        class="child1"
        v-if="info.orderStatus==3"
      >申请售后</button>-->

      <button class="child1" v-if="info.orderStatus == 3 || info.isAfterSale == 1" open-type="contact">联系商家</button>
      <button
        class="child1"
        v-if="info.orderStatus == 2"
        @click.stop="upDateFinishTime(info.orderId)"
      >确认收货</button>
      <button class="child1" v-if="info.orderStatus == 0" @click.stop="goPay(info)">去支付</button>
      <button class="child2" @click="delOrder">删除订单</button>
    </div>
  </section>
</template>
<script>
export default {
  data() {
    return {
      orderId: "",
      info: ""
    };
  },
  onLoad(data) {
    this.orderId = data.orderId;
    this.getOrderInfo();
  },
  methods: {
    tim(){
      this.$tim();
    },
    getOrderInfo() {
      this.$api.getOrderInfo({ orderId: this.orderId }).then(res => {
        this.info = res.data.order;
        this.$set(
          this.info,
          "createTime",
          this.formatDate(res.data.order.createTime)
        );
      });
    },
    delOrder() {
        var _this = this;
        wx.showModal({
          title: "删除", //提示的标题,
          content: "确定删除？", //提示的内容,
          showCancel: true, //是否显示取消按钮,
          cancelText: "取消", //取消按钮的文字，默认为取消，最多 4 个字符,
          cancelColor: "#000000", //取消按钮的文字颜色,
          confirmText: "确定", //确定按钮的文字，默认为取消，最多 4 个字符,
          confirmColor: "#3BB8FD", //确定按钮的文字颜色,
          success: res => {
            if (res.confirm) {
              _this.$api.deleteOrder({ orderId: this.orderId }).then(res => {
                if (res.code == 0) {
                  wx.navigateBack({
                    delta: 1
                  });
                }
              });
            } else if (res.cancel) {
              console.log("用户点击取消");
            }
          }
        });
    },
    //确认收货
    upDateFinishTime(orderId) {
      this.$api.upDateFinishTime({ orderId }).then(res => {
        if (res.code == 0) {
          this.getOrderInfo();
        }
      });
    },
    //付款
    goPay(item) {
      const self = this;
      this.$api
        .toPay({
          orderId: item.orderId,
          payMode: 1
        })
        .then(res => {
          const payInfo = JSON.parse(res.data.payParams);
          wx.requestPayment({
            timeStamp: payInfo.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
            nonceStr: payInfo.nonceStr, // 支付签名随机串，不长于 32 位
            package: payInfo.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
            signType: payInfo.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
            paySign: payInfo.paySign, // 支付签名
            success: function(res) {
              wx.showToast({
                title: "支付成功",
                icon: "none",
                mask: true,
                duration: 3000
              });
              self.getOrderInfo();
            },
            cancel: function(res) {},
            fail: function(res) {
              wx.showToast({
                title: "支付失败，请重试",
                icon: "none",
                mask: true,
                duration: 3000
              });
            }
          });
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.my-orderdetail {
  .address {
    margin: 10px 15px;
    padding: 20px 15px;
    background: white;
    border-radius: 5px;
    .icon {
      width: 25px;
      height: 25px;
      margin-right: 15px;
    }
    .name {
      font-size: 15px;
      font-family: PingFang;
      font-weight: bold;
      color: rgba(46, 46, 46, 1);
      margin-right: 15px;
    }
    .phone {
      font-size: 12px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(193, 196, 201, 1);
    }
    .add {
      font-size: 12px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(64, 68, 76, 1);
      line-height: 21px;
    }
  }
  .commodity {
    background: white;
    margin: 15px 15px 0;
    &:last-child {
      margin-bottom: 15px;
    }
    padding: 15px;
    border-radius: 5px;
    .status {
      text-align: right;
      font-size: 15px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(59, 184, 253, 1);
      line-height: 13px;
    }
    .content {
      img {
        width: 100px;
        height: 100px;
        border-radius: 4px;
      }
      .left {
        .title {
          font-size: 14px;
          font-family: PingFang;
          font-weight: 500;
          color: rgba(46, 46, 46, 1);
          line-height: 24px;
        }
        .desc {
          font-size: 12px;
          font-family: PingFang;
          font-weight: 500;
          color: rgba(193, 196, 201, 1);
        }
        .price {
          font-size: 15px;
          font-family: DIN;
          font-weight: 500;
          color: rgba(255, 156, 0, 1);
          line-height: 22px;
        }
        .num {
          font-size: 15px;
          font-family: PingFang;
          font-weight: 500;
          color: rgba(46, 46, 46, 1);
          line-height: 21px;
        }
      }
    }
  }
  .info {
    margin: 15px;
    padding: 5px 15px;
    background: rgba(255, 255, 255, 1);
    border-radius: 5px;
    .item {
      border-bottom: 1px solid #f7f7f7;
      padding: 15px 0;
    }
    .left {
      font-size: 12px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(193, 196, 201, 1);
    }
    .right {
      font-size: 13px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(46, 46, 46, 1);
    }
    .price {
      font-size: 13px;
      font-family: DIN;
      font-weight: 500;
      color: rgba(255, 156, 0, 1);
      line-height: 22px;
    }
  }
  .bottom {
    margin: 30px 15px;
    button {
      width: 165px;
      height: 44px;
      line-height: 44px;
      border-radius: 5px;
    }
    .child2 {
      background: rgba(59, 184, 253, 1);
      font-size: 18px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
    }
    .child1 {
      font-size: 18px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(59, 184, 253, 1);
      border: 1px solid rgba(59, 184, 253, 1);
    }
  }
}
</style>
<style lang="scss">
.my-order {
}
page {
  background: #f7f7f7;
}
</style>